<template>
    <el-row>
        <el-col :span="18">
            <el-input v-model="keyword" size="small" placeholder="题目搜索" :prefix-icon="Search"
                @change="filterQuestion" />
        </el-col>
        <el-col :span="6">
            <el-switch v-model="showAnswer" active-color="#13ce66" inactive-color="#ff4949" inactive-value="0"
                active-text="显示答案" active-value="1">
            </el-switch>
        </el-col>
    </el-row>




    <el-card class="box-card" v-for="question in tableData" :key="question.id">
        <div class="text item">
            <span v-html="question.question"></span>

            <el-row>
                <el-col :span="12">A: <span v-html="question.optionA"></span></el-col>
                <el-col :span="12">B: <span v-html="question.optionB"></span></el-col>
            </el-row>

            <el-row>
                <el-col v-if="showAnswer == 1" :span="24">答案：{{ question.answerOption }}</el-col>
                <el-col v-if="showAnswer == 0" :span="24">答案：</el-col>
            </el-row>
        </div>
    </el-card>

    <!-- 分页 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';
import {
    UploadFilled,
    Search

} from '@element-plus/icons-vue'
const currentPage = ref(1)
const pageSizes = ref([5, 8, 10])
const pageSize = ref(pageSizes.value[0]);
const total = ref(0)
const tableData = ref([])
const showAnswer = ref(0)
const keyword = ref("")

const handleCurrentChange = () => {
    getList(currentPage.value, pageSize.value)
}

const handleSizeChange = () => {
    currentPage.value = 1;
    getList(currentPage.value, pageSize.value)
}

onMounted(() => {
    getList(currentPage.value, pageSize.value)
})

const getList = async (currentPage, pageSize) => {
    var res = await axios.get(`/knowledge/getQuestionFromES?page=${currentPage}&size=${pageSize}&keyword=${keyword.value}`)
    console.log(res.data)
    if (res.data.code === 200) {
        tableData.value = res.data.data.records
        total.value = res.data.data.total
    } else {
        ElMessage.error(res.data.msg)
    }
}

const filterQuestion = (filter) => {

    currentPage.value = 1;
    getList(currentPage.value, pageSize.value)
}

</script>

<style>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}
</style>